<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../css/normalize.css"/>
    <link rel="stylesheet" href="../../css/fa.css"/>
    <link rel="stylesheet" href="../../css/icon.css"/>
    <link rel="stylesheet" href="../../css/ares_animate.min.css"/>
    <link rel="stylesheet" href="../../css/ares_hover_variant.min.css"/>
    <link rel="stylesheet" href="../../css/ares_reboot.css"/>
    <link rel="stylesheet" href="../../css/app.min.css"/>
    <link rel="stylesheet" href="../../css/iframe.css"/>
    <style>
        .bed-num {
            width: 20%;
            height: 60px;
            margin-bottom: 30px;
        }

        #in-hospital-list {
            position: relative;
            padding: 30px 30px;
            min-height: 300px;
        }

        /* 床位号 */
        #bed-num-model {
            display: none;
        }

        .bed-sm {
            padding: .5em 1em;
            min-height: 50px;
            border: 1px solid #666;
            border-left-width: 5px;
            border-radius: 5px;
            margin: 0;
            position: relative;
        }

        .bed-sm p {
            margin-bottom: 0;
            line-height: 1.5em;
        }

        /* 床位详细信息显示 */
        #show-bed-mes-model {
            display: none;
            border-radius: 5px;
            background-color: #fff;
        }

        .show-bed-mes {
            padding: 5px;
            border: 1px solid #666;
            border-radius: 5px;
            background-color: #fff;
            margin-bottom: 30px;
        }

        .bed-num-show-lg {
            position: absolute;
            left: -5px;
            top: 51px;
            z-index: 100;
            min-width: 280px;
            z-index: 1000;
        }

        .bed-num-show-lg > .show-bed-mes {
            margin-bottom: 0;
        }

        .show-bed-mes > ul {
            padding: 0;
            margin: 0;
        }

        .show-bed-mes > ul > li {
            list-style: none;
        }

        .show-bed-mes > ul > li > span {
            padding-right: 5px;
        }

        .show-bed-mes > ul:first-child {
            float: left;
            height: auto;
            width: 50%;
        }

        .show-bed-mes > ul:first-child > li {
            height: 2em;
            line-height: 2em;
            padding: 5px 0;
        }

        .show-bed-mes > ul:last-child {
            float: right;
            padding-left: 5px;
            background-color: #E2E5EE;
        }

        .show-bed-mes > ul:last-child > li {
            height: 25px;
            line-height: 25px;
            clear: both;
            margin-top: 5px;
            margin-bottom: 5px;
            border-radius: 5px;
            border: 1px solid #ddd;
        }

        .show-bed-mes > ul:last-child > li > b,
        .show-bed-mes > ul:last-child > li > span {
            float: left;
            height: 23px;
        }

        .show-bed-mes > ul:last-child > li > b {
            width: 3em;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            text-align: center;
        }

        .show-bed-mes > ul:last-child > li > span {
            text-indent: 0.5em;
            width: 6em;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .show-bed-mes > ul:last-child > li:nth-child(1) > b {
            background-color: #5BCCFF;
        }

        .show-bed-mes > ul:last-child > li:nth-child(2) > b {
            background-color: #85D266;
        }

        .show-bed-mes > ul:last-child > li:nth-child(3) > b {
            background-color: #FFC961;
        }

        .show-bed-mes > ul:last-child > li:nth-child(4) > b {
            background-color: #FF7761;
        }

        .show-bed-mes > ul:last-child > li:nth-child(5) > b {
            background-color: #A889E9;
        }
    </style>
</head>

<body>
<form class="page-search layui-form" lay-filter="search-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">患者类别</label>
            <div class="layui-input-inline">
                <select id="patient-type" name="patientType" lay-filter="patient-type">
                    <option value="">全部</option>
                    <option value="1">门诊患者</option>
                    <option value="2">住院患者</option>
                    <option value="3">会诊患者</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">患者编号</label>
            <div class="layui-input-inline">
                <input name="searchKey" placeholder="患者编号 | 姓名" class="search-key layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="search-submit">查询</button>
            <button id="create-btn" class="layui-btn">新增</button>
        </div>
    </div>
</form>
<table class="layui-hide" id="table" lay-filter="table"></table>
<div class="color-remark"></div>
<div id="pagination"></div>


<script type="text/html" id="tableBar">
    <button class="layui-btn layui-btn-xs" lay-event="check">病历</button>
    <button class="layui-btn layui-btn-xs" lay-event="save">存档</button>
    {{#  if(d.patient_type != 3){ }}
    <button class="layui-btn layui-btn-xs" lay-event="transfer">转诊</button>
    {{#  } }}
</script>
<script type="text/javascript" src="../../plugins/layui/layui.js"></script>
<script type="text/javascript" src="../../aresExtends/config/layuiConfig.js"></script>
<script>
    var init;
    layui.use(['table', 'form', 'laypage', 'conf', 'utils', 'filters', 'dateFilters', 'mandyServices', 'store', 'widget'], function (table, form, laypage, config, utils, filters, dateFilters, mandyServices, store, widget) {
        var $createBtn = $('#create-btn');

        init = function () {
            getPageList(1, config.pagination.limit);
            renderPatientClassifyColorMark();
        }
        init();
        utils.aresPageEventInit('updateHomepage', 'homepage', function (data) {
            console.log(11111,data)
            getPageList(1, config.pagination.limit);
        })

        /**
         * @author: ares
         * @date: 2021/1/25 9:16
         * @description: 查询
         */
        form.on('submit(search-submit)', function (data) {
            getPageList(1, config.pagination.limit);
            return false;
        });

        /**
         * @author: ares
         * @date: 2021/3/25 15:48
         * @description: 新建病例
         */
        $createBtn.on('click', function (event) {
            event.preventDefault();
            showCreateEmrModal();
        })

        /**
         * @author: ares
         * @date: 2021/3/26 14:55
         * @description: 分页查询
         */
        function getPageList(currentPage, pageSize) {
            var fields = form.val('search-form'),
                params = {
                    patientType: fields.patientType,
                    search_key: fields.searchKey,
                }
            if (fields.searchKey.length > 0) {
                params.hospital_id = store.session.get("hospital");
                mandyServices.mandy_get_all_emr(currentPage, pageSize, params).then(function (res) {
                    buildAllPatientTable(res.data);
                });
            } else {
                mandyServices.mandy_get_my_emr(currentPage, pageSize, params).then(function (res) {
                    buildAllPatientTable(res.data);
                });
            }
        }

        /**
         * @author: ares
         * @date: 2021/3/26 14:59
         * @description: 构建全部患者表格
         * @param{object}  data
         */
        function buildAllPatientTable(data) {
            laypage.render($.extend(config.pagination, {
                elem: 'pagination',
                count: data.count,
                curr: data.current_page,
                jump: function (obj, first) {
                    if (!first) getPageList(obj.curr, obj.limit);
                }
            }));
            table.render({
                elem: '#table',
                data: data.list || [],
                cellMinWidth: 80,
                cols: [[
                    {
                        title: '类型', width: 50, align: 'center',
                        templet: function (d) {
                            return '<i class="fa-circle" style="color: ' + filters.patientClassifyColorFormat(d.patient_classify) + ';"></i>';
                        }
                    },
                    {field: 'number', title: '患者编号', width: 160},
                    {
                        title: '患者类别',
                        templet: function (d) {
                            return filters.patientTypeFormat(d.patient_type);
                        }
                    },
                    {title: '姓名', templet: '<span>{{d.patient.name}}</span>'},
                    {
                        title: '性别',
                        templet: function (d) {
                            return filters.sexFormat(d.patient.sex);
                        }
                    },
                    {
                        title: '年龄',
                        templet: function (d) {
                            return filters.ageFormat(d.patient.birthday);
                        }
                    },
                    {
                        title: '医保类型',
                        templet: function (d) {
                            return filters.insuranceTypeFormat(d.insurance_type);
                        }
                    },
                    {
                        title: '创建时间', width: 160,
                        templet: function (d) {
                            return dateFilters.dateTimeFormat(d.create_time);
                        }
                    },
                    {title: '操作', fixed: 'right', width: 140, templet: '#tableBar'}
                ]]
            });
            table.on('tool(table)', function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case 'check':
                        checkEmr(data.id);
                        break;
                    case 'transfer':
                        showTransferModal(data);
                        break;
                    case 'save':
                        archives(data.id);
                        break;
                }
                ;
            });
        }

        /**
         * @author: ares
         * @date: 2021/3/26 15:01
         * @description: 查看病历
         * @param{string} emrId
         */
        function checkEmr(emrId) {
            utils.pushTopRoute('/emr/info/' + emrId);
        }

        /**
         * @author: ares
         * @date: 2021/3/26 14:58
         * @description: 存档
         * @param{string} emrId
         */
        function archives(emrId) {
            mandyServices.mandy_put_is_save(emrId).then(function (res) {
                utils.msgSuccess(res.message);
                getPageList(1, config.pagination.limit);
            })
        }

        /**
         * @author: ares
         * @date: 2021/3/26 14:57
         * @description: 构建转诊模态框
         * @param{object} data 当前行数据
         */
        function showTransferModal(data) {
            utils.ARES.cache.homepage = data;
            utils.layerOpen({
                type: 2,
                title: '转诊',
                area: ['800px', '500px'],
                content: 'pages/patient/transfer_form.html',
                end: function (index, layero) {
                    utils.ARES.cache.homepage = null;
                }
            });
        }

        /**
         * @author: ares
         * @date: 2021/3/25 15:44
         * @description: 显示新建病例模态框
         */
        function showCreateEmrModal() {
            utils.layerOpen({
                type: 2,
                title: '新建病例',
                area: ['800px', '500px'],
                content: 'pages/emr/add.html',
                end: function (index, layero) {

                }
            });
        }

        /**
         * @author: ares
         * @date: 2021/3/26 11:27
         * @description: 渲染病患类型颜色标记
         */
        function renderPatientClassifyColorMark() {
            $('.color-remark').empty().append(widget.createPatientClassifyColorMark());
        }
    })
</script>
</body>
</html>
